<template>
  <a-modal
    :title="
      productisEdit && productisCopy
        ? '复制工艺'
        : productisEdit
        ? '编辑工艺'
        : '添加工艺'
    "
    :visible="show"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    :maskClosable="false"
    width="30%"
    class="procedure-modal"
  >
    <div class="title">
      <a-form-model
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 14 }"
        :model="reviseForm"
        :rules="reviseformRules"
        ref="reviseForm"
      >
        <a-form-model-item label="产品编码" required prop="MaterialCode">
          <a-select
            style="width: 100%"
            show-search
            :value="materialsSearch.keyValue"
            v-model="reviseForm.MaterialCode"
            @popupScroll="materialhandlepopupScroll"
            @search="materialSearch"
            @change="materialChange"
          >
            <a-spin
              v-if="materialFetching"
              slot="notFoundContent"
              size="small"
            />
            <a-select-option
              v-for="item in materialsList"
              :value="item.MaterialCode"
              :key="item.MaterialCode"
            >
              {{ item.MaterialCode }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="产品名称">
          <a-input v-model="reviseForm.MaterialName" />
        </a-form-model-item>
        <a-form-model-item label="工艺名称" required prop="RouteName">
          <a-input v-model="reviseForm.RouteName" />
        </a-form-model-item>
        <a-form-model-item label="工艺版本" required prop="RouteVer">
          <a-input v-model="reviseForm.RouteVer" />
        </a-form-model-item>
        <a-form-model-item label="工艺描述">
          <a-textarea style="resize: none" v-model="reviseForm.RouteDesc" />
        </a-form-model-item>
      </a-form-model>
    </div>
  </a-modal>
</template>

<script>
import { getMaterials } from "@/api/Material/index";
import { insRoute, updRoute, copyRoute } from "@/api/router-manage/index";
export default {
  props: ["show", "productisEdit", "reviseForm", "productisCopy"],
  data() {
    return {
      materialsList: [], //产品选择列表
      materialsNum: "", //总条数
      materialsSearch: {
        pageRequestModel: {
          pageIndex: 1,
          pageSize: 30,
        },
        keyValue: "",
        ifLeafNode: true,
      }, //搜索信息
      currentmaterialsInfo: {}, //当前选中的产品
      confirmLoading: false, //弹窗loading
      materialFetching: false, //搜索loading
      reviseformRules: {
        MaterialCode: [
          { required: true, message: "请选择产品", trigger: "change" },
        ],
        RouteName: [
          { required: true, message: "请填写工艺名称", trigger: "blur" },
        ],
        RouteVer: [
          { required: true, message: "请填写工艺版本", trigger: "blur" },
        ],
      }, //添加工序名称校验
    };
  },
  methods: {
    //关闭弹窗
    handleCancel() {
      this.$refs.reviseForm.clearValidate();
      this.$emit("update:show", false);
    },

    //确认添加/修改
    handleOk() {
      this.$refs.reviseForm.validate(async (valid) => {
        if (valid) {
          this.confirmLoading = true;
          if (!this.productisEdit) {
            const res = await insRoute(this.reviseForm);
            if (res.Data == "") {
              this.$message.info("新增成功");
              this.$emit("break");
              this.handleCancel();
            } else {
              this.$message.error(res.Data);
            }
            this.confirmLoading = false;
          } else if (this.productisEdit && this.productisCopy) {
            const res = await copyRoute(this.reviseForm);
            if (res.Data == "") {
              this.$message.info("复制成功");
              this.$emit("routebreak");
              this.handleCancel();
            } else {
              this.$message.error(res.Data);
            }
            this.confirmLoading = false;
          } else {
            const res = await updRoute(this.reviseForm);
            if (res.Data == "") {
              this.$message.info("修改成功");
              this.$emit("routebreak");
              this.handleCancel();
            } else {
              this.$message.error(res.Data);
            }
            this.confirmLoading = false;
          }
        }
      });
    },

    //下拉加载更多
    materialhandlepopupScroll(e) {
      const { scrollHeight, scrollTop, clientHeight } = e.target;
      if (scrollHeight - scrollTop === clientHeight) {
        this.materialsSearch.pageRequestModel.pageIndex += 1;
        if (this.materialsList.length < this.materialsNum) {
          this.getmaterialsFun();
        }
      }
    },
    //远程搜索
    materialSearch(value) {
      this.materialsSearch.keyValue = value;
      this.materialsSearch.pageRequestModel.pageIndex = 1;
      this.materialsList = [];
      this.materialFetching = true;
      this.getmaterialsFun();
    },
    //搜索选中
    materialChange(value) {
      this.currentmaterialsInfo = this.materialsList.find(
        (item) => item.MaterialCode == value
      );
      if (this.currentmaterialsInfo.MaterialName) {
        this.reviseForm.MaterialName = this.currentmaterialsInfo.MaterialName;
      }
    },
    //查询产品
    async getmaterialsFun() {
      const res = await getMaterials(this.materialsSearch);
      this.materialFetching = false;
      this.materialsList = this.materialsList.concat(res.Data.Data);
      this.materialsNum = res.Data.TotalNumber;
    },
  },
  computed: {
    //判断显示隐藏返回值
    myShow: function () {
      return this.show;
    },
  },
  watch: {
    //判断显示隐藏返回值触发方法

    myShow: function (newValue) {
      if (newValue) {
        this.materialsSearch.pageRequestModel.pageIndex = 1;
        this.materialsList = [];
        this.getmaterialsFun();
      }
    },
  },
};
</script>

<style lang="less" scoped></style>
